<template>
  <div class="min-h-screen">
    <!-- Hero Section -->
    <section class="relative overflow-hidden bg-gradient-to-br from-primary-50 via-white to-purple-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div class="text-center">
          <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-r from-primary-600 to-purple-600 rounded-2xl mb-6 animate-pulse-slow">
            <Mic class="w-10 h-10 text-white" />
          </div>

          <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
            AI 智能会议纪要
          </h1>

          <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
            本地化AI会议纪要系统，支持实时录音、音频上传、智能转录和多语言会议纪要生成
          </p>

          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <router-link
              to="/record"
              class="btn-primary text-lg px-8 py-4 flex items-center justify-center gap-2"
            >
              <Mic class="w-5 h-5" />
              开始录音
            </router-link>

            <router-link
              to="/upload"
              class="btn-secondary text-lg px-8 py-4 flex items-center justify-center gap-2"
            >
              <Upload class="w-5 h-5" />
              上传音频
            </router-link>
          </div>
        </div>
      </div>

      <!-- Decorative elements -->
      <div class="absolute top-20 left-10 w-20 h-20 bg-primary-200 rounded-full blur-3xl opacity-50"></div>
      <div class="absolute bottom-20 right-10 w-32 h-32 bg-purple-200 rounded-full blur-3xl opacity-50"></div>
    </section>

    <!-- Features Section -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            核心功能
          </h2>
          <p class="text-xl text-gray-600">
            专业的AI技术，为您的会议提供智能服务
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div class="text-center group">
            <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-primary-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
              <Mic class="w-8 h-8 text-white" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">实时录音</h3>
            <p class="text-gray-600">Web Audio API 高质量录音，实时音频可视化</p>
          </div>

          <div class="text-center group">
            <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
              <Upload class="w-8 h-8 text-white" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">文件上传</h3>
            <p class="text-gray-600">支持多种音频格式，拖拽上传体验</p>
          </div>

          <div class="text-center group">
            <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
              <Brain class="w-8 h-8 text-white" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">AI转录</h3>
            <p class="text-gray-600">高精度语音识别</p>
          </div>

          <div class="text-center group">
            <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-red-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
              <FileText class="w-8 h-8 text-white" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">智能纪要</h3>
            <p class="text-gray-600">AI 生成专业会议纪要</p>
          </div>
        </div>
      </div>
    </section>

    <!-- System Status -->
    <!-- <section class="py-20 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            系统状态
          </h2>
          <p class="text-xl text-gray-600">
            实时监控系统运行状态
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="card p-6">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900">后端服务</h3>
              <div class="w-3 h-3 rounded-full" :class="systemStatus.backend ? 'bg-green-500' : 'bg-red-500'"></div>
            </div>
            <p class="text-gray-600">
              {{ systemStatus.backend ? '运行正常' : '连接失败' }}
            </p>
            <p class="text-sm text-gray-500 mt-2" v-if="systemStatus.backend">
              GPU: {{ systemStatus.gpuInfo.current_device }}
            </p>
          </div>

          <div class="card p-6">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900">Whisper模型</h3>
              <div class="w-3 h-3 rounded-full" :class="systemStatus.whisper ? 'bg-green-500' : 'bg-red-500'"></div>
            </div>
            <p class="text-gray-600">
              {{ systemStatus.whisper ? '已加载' : '未加载' }}
            </p>
            <p class="text-sm text-gray-500 mt-2" v-if="systemStatus.whisper">
              设备: {{ systemStatus.gpuInfo.current_device }}
            </p>
          </div>

          <div class="card p-6">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900">数据统计</h3>
              <BarChart class="w-5 h-5 text-gray-400" />
            </div>
            <div class="space-y-2 text-gray-600">
              <p>会议: {{ systemStatus.stats.meetings_count }}</p>
              <p>转录: {{ systemStatus.stats.transcripts_count }}</p>
              <p>纪要: {{ systemStatus.stats.minutes_count }}</p>
            </div>
          </div>
        </div>
      </div>
    </section> -->

    <!-- Recent Meetings -->
    <section class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center mb-8">
          <h2 class="text-3xl font-bold text-gray-900">
            最近的会议
          </h2>
          <router-link
            to="/history"
            class="text-primary-600 hover:text-primary-700 font-medium flex items-center gap-1"
          >
            查看全部
            <ArrowRight class="w-4 h-4" />
          </router-link>
        </div>

        <div v-if="recentMeetings.length === 0" class="text-center py-12">
          <FileX class="w-16 h-16 text-gray-300 mx-auto mb-4" />
          <p class="text-gray-500">暂无会议记录</p>
          <div class="mt-6">
            <router-link to="/record" class="btn-primary">
              开始第一个会议
            </router-link>
          </div>
        </div>

        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div
            v-for="meeting in recentMeetings"
            :key="meeting.id"
            class="card p-6 hover:shadow-lg transition-shadow duration-300 cursor-pointer"
            @click="goToMeeting(meeting.id)"
          >
            <div class="flex items-start justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900 flex-1 mr-2">
                {{ meeting.title }}
              </h3>
              <div
                class="px-2 py-1 text-xs rounded-full"
                :class="getStatusClass(meeting.status)"
              >
                {{ getStatusText(meeting.status) }}
              </div>
            </div>

            <p v-if="meeting.description" class="text-gray-600 text-sm mb-4">
              {{ meeting.description }}
            </p>

            <div class="flex items-center justify-between text-sm text-gray-500">
              <span>{{ formatDate(meeting.created_at) }}</span>
              <Clock v-if="meeting.duration" class="w-4 h-4" />
              <span v-if="meeting.duration">{{ formatDuration(meeting.duration) }}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useMeetingStore } from '@/stores/meeting'
import { healthCheck } from '@/services/api'
import type { HealthCheck } from '@/types'
import {
  Mic,
  Upload,
  Brain,
  FileText,
  BarChart,
  ArrowRight,
  FileX,
  Clock
} from 'lucide-vue-next'

const router = useRouter()
const meetingStore = useMeetingStore()

const systemStatus = ref<{
  backend: boolean
  whisper: boolean
  gpuInfo: {
    current_device: string
    preferred_gpu_device: number
    available_gpu_count: number
  }
  stats: {
    meetings_count: number
    transcripts_count: number
    minutes_count: number
  }
}>({
  backend: false,
  whisper: false,
  gpuInfo: {
    current_device: 'cpu',
    preferred_gpu_device: 9,
    available_gpu_count: 0
  },
  stats: {
    meetings_count: 0,
    transcripts_count: 0,
    minutes_count: 0
  }
})

const recentMeetings = computed(() => meetingStore.recentMeetings)

const checkSystemStatus = async () => {
  try {
    const health: HealthCheck = await healthCheck()

    systemStatus.value = {
      backend: health.status === 'healthy',
      whisper: health.whisper_model_loaded,
      gpuInfo: {
        current_device: health.current_device,
        preferred_gpu_device: health.preferred_gpu_device,
        available_gpu_count: health.available_gpu_count
      },
      stats: {
        meetings_count: health.meetings_count,
        transcripts_count: health.transcripts_count,
        minutes_count: health.minutes_count
      }
    }
  } catch (error) {
    console.error('Failed to check system status:', error)
    systemStatus.value.backend = false
  }
}

const goToMeeting = (id: string) => {
  router.push(`/meeting/${id}`)
}

const getStatusClass = (status: string) => {
  switch (status) {
    case 'recording':
      return 'bg-red-100 text-red-800'
    case 'processing':
      return 'bg-yellow-100 text-yellow-800'
    case 'completed':
      return 'bg-green-100 text-green-800'
    default:
      return 'bg-gray-100 text-gray-800'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'recording':
      return '录音中'
    case 'processing':
      return '处理中'
    case 'completed':
      return '已完成'
    default:
      return '未知'
  }
}

const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const formatDuration = (seconds: number) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60

  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }
  return `${minutes}:${secs.toString().padStart(2, '0')}`
}

onMounted(async () => {
  await checkSystemStatus()
  await meetingStore.fetchMeetings()
})
</script>